
<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
import "./echarts-auto-tooltip";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "300px",
    },
    chartData: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      chart: null,
      timer: null,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      // let _this = this;
      // this.chart.on("click", function (param) {
      //   _this.$emit("showSpecialNum", param.data.deptId, param.name);
      // });
      this.setOptions(this.chartData);
    },
    setOptions(chartData) {
      let option = {
        // title: [
        //   {
        //     text: "处理率",
        //     x: "center",
        //     top: "32%",
        //     textStyle: {
        //       color: "#fff",
        //       fontSize: 16,
        //       fontWeight: "100",
        //     },
        //   },
        //   {
        //     text: "60%",
        //     x: "center",
        //     top: "50%",
        //     textStyle: {
        //       fontSize: 16,
        //       color: "#00f0ff",
        //       foontWeight: "500",
        //     },
        //   },
        // ],
        // color: [
        //   "#37a2da",
        //   "#32c5e9",
        //   "#9fe6b8",
        //   "#ffdb5c",
        //   "#ff9f7f",
        //   "#fb7293",
        //   "#e7bcf3",
        //   "#8378ea",
        // ],
        color: [
          "#b3da61",
          "#cde460",
          "#6ecd8e",
          "#539d73",
          "#26bc96",
          "#2b7337",
        ],

        tooltip: {
          trigger: "item",
          position: ["30%", "30%"],
          formatter: "{b} : {c} ({d}%)",
        },
        // legend: {
        //   left: "center",
        //   bottom: "10",
        //   data: ["Industries", "Technology", "Forex", "Gold", "Forecasts"],
        // },
        series: [
          {
            type: "pie",
            // center: ["70%", "70%"],
            radius: ["65%", "80%"],
            minAngle: 10,
            avoidLabelOverlap: true,
            // roseType: "radius",
            hoverOffset: 5,
            data: chartData.map((v) => {
              return { name: v.personTypeName, value: v.totalPerson };
            }),
            animationEasing: "cubicInOut",
            animationDuration: 1500,
            label: {
              show: false,
              position: "center",
            },
          },
        ],
      };
      this.chart.setOption(option);

      // tools.loopShowTooltip(this.chart, option, { loopSeries: true });
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
      let _this = this;
      let currentIndex = -1;
      this.timer = setInterval(function () {
        var dataLen = option.series[0].data.length;
        // 取消之前高亮的图形
        _this.chart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
        currentIndex = (currentIndex + 1) % dataLen;

        // 高亮当前图形
        _this.chart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
        // 显示 tooltip
        _this.chart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
      }, 3000);
    },
  },
};
</script>
